<template>
  <view class="good-detail-box">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true"
            :autoplay="true"
            :interval="3000"
            :duration="1000"
            :circular="true">
      <swiper-item v-for="(item, index) in goodData.pics"
                   :key="item.pics_id"
                   @click="swiperItemClick(index)">
        <view class="swiper-item">
          <image :src="item.pics_mid_url"
                 mode="scaleToFill"></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- 商品属性区域 -->
    <view class="good-info-box">
      <!-- 商品价格 v-if防止价格显示undefined -->
      <view class="good-price"
            v-if="goodData.goods_price">
        ￥{{goodData.goods_price}}
      </view>
      <!-- 标题区域 -->
      <view class="good-title-box">
        <view class="title">{{goodData.goods_name}}</view>
        <view class="favorite-box">
          <uni-icons class="favorite-icon"
                     type="star">
          </uni-icons>
          <view class="favorite-text">收藏</view>
        </view>
      </view>
      <!-- 底部区域 -->
      <view class="info-footer">
        <view class="footer-item">快递: 免运费</view>
      </view>
    </view>

    <!-- 商品详情区域 -->
    <rich-text :nodes="goodData.goods_introduce"></rich-text>

    <!-- 商品加购和购买区域 -->
    <uni-goods-nav class="good-nav"
                   :fill="true"
                   :options="goodNavOptionList"
                   :button-group="goodNavBtnList"
                   @click="navLeftClick"
                   @buttonClick="navRightClick" />
  </view>
</template>

<script>
  import { mapMutations, mapGetters } from 'vuex'

  export default {
    data() {
      return {
        goodData: {
          goods_id: null
        },
        goodNavBtnList: [{
            key: 'addCart',
            text: '加入购物车',
            backgroundColor: '#ff0000',
            color: '#fff'
          },
          {
            key: 'atOnceBuy',
            text: '立即购买',
            backgroundColor: '#ffa200',
            color: '#fff'
          }
        ]
      }
    },
    computed: {
      // 购物车中商品总数，vuex
      ...mapGetters('m_cart', ['cartListTotal']),
      /**
       * 商品大图url列表
       */
      goodBigImageList() {
        if (!this.goodData.pics)
          return []
        return this.goodData.pics.map(item => item.pics_big_url)
      },
      // 商品导航栏左侧按钮数据
      goodNavOptionList() {
        return [{
          icon: 'shop',
          text: '店铺',
          info: 0
        }, {
          icon: 'cart',
          text: '购物车',
          // 购物车右上角显示的数量
          info: this.cartListTotal,
          // 跳转的url
          url: '/pages/cart/cart',
          // 如跳转到tabbar页面，则加上该标志
          isRouterTab: true
        }]
      }
    },
    onLoad(options) {
      this.goodData.goods_id = options.goods_id
    },
    mounted() {
      this.getGoodData()
    },
    methods: {
      // 加入购物车
      ...mapMutations('m_cart', ['addCartList']),
      /**
       * 获取商品数据
       */
      getGoodData() {
        return uni.$http.get('goods/detail', this.goodData).then(({
          data
        }) => {
          if (data.meta.status !== 200)
            return uni.$showError()
          // 正则替换,将所有img改为block盒子,将webp后缀改为jpg,否则ios系统可能无法正确显示图片
          data.message.goods_introduce = data.message.goods_introduce
            .replace(/<img /g, '<img style="display: block;" ')
            .replace(/webp/g, 'jpg')
          this.goodData = data.message
        })
      },
      /**
       * 轮播图点击事件
       * @param {number} index 点击项的索引
       */
      swiperItemClick(index) {
        uni.previewImage({
          current: index,
          urls: this.goodBigImageList
        })
      },
      /**
       * 商品导航左侧按钮点击事件
       */
      navLeftClick({
        content
      }) {
        if (!content.url)
          return
        // 判断跳转类型，如为tab，则跳转到tabbar页面
        let routerFunction = content.isRouterTab ? uni.switchTab : uni.navigateTo
        routerFunction({
          url: content.url
        })
      },
      /**
       * 商品导航右侧按钮点击事件
       */
      navRightClick({ content }) {
        switch (content.key) {
          case 'addCart':
            this.addCartList({
              goods_id: this.goodData.goods_id,
              goods_name: this.goodData.goods_name,
              goods_price: this.goodData.goods_price,
              goods_count: 1,
              goods_small_logo: this.goodData.goods_small_logo,
              goods_state: true
            })
            break
        }
      }
    }
  }
</script>

<style lang="scss">
  .good-detail-box {
    padding-bottom: 50px;

    swiper {
      height: 650rpx;

      .swiper-item,
      image {
        width: 100%;
        height: 100%;
      }
    }

    .good-info-box {
      padding: 20rpx;

      .good-price {
        padding: 20rpx 0;
        font-size: 36rpx;
        color: #c00000;
      }

      .good-title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26rpx;

        .title {
          flex: 1;
        }

        .favorite-box {
          width: 100rpx;
          height: 80rpx;
          border-left: 1px solid #efefef;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          font-size: 24rpx;
          color: gray;

          .favorite-icon {
            color: gray !important;
          }

          &.red {
            color: #c00000;

            .favorite-icon {
              color: #c00000 !important;
            }
          }
        }
      }

      .info-footer {
        padding: 20rpx 0;
        font-size: 24rpx;
        color: gray;
      }
    }

    .good-nav {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
    }
  }
</style>
